import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';
import { motion } from 'framer-motion';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { useSEOConfig, generateHreflangTags, generateStructuredData } from '@/lib/seo';

export default function RegularReports() {
  const { t } = useTranslation();
  const seoConfig = useSEOConfig({
    title: `${t('header.regularReports')} - 豆豆Pay`,
    description: t('seo.pages.regularReports.description')
  });
  const hreflangTags = generateHreflangTags('/investor-relations/regular-reports');
  const structuredData = generateStructuredData(seoConfig, 'website');
  
  // 模拟财务报告数据
  const financialReports = [
    {
      year: 2024,
      quarterReports: [
        { title: t('investor.q1Report'), date: '2024-04-15', fileSize: '3.2 MB', format: 'PDF' },
        { title: t('investor.q2Report'), date: '2024-07-15', fileSize: '3.5 MB', format: 'PDF' },
        { title: t('investor.q3Report'), date: '2024-10-15', fileSize: '3.3 MB', format: 'PDF' },
        { title: t('investor.annualReport'), date: '2025-03-20', fileSize: '5.8 MB', format: 'PDF' }
      ]
    },
    {
      year: 2023,
      quarterReports: [
        { title: t('investor.q1Report'), date: '2023-04-15', fileSize: '3.0 MB', format: 'PDF' },
        { title: t('investor.q2Report'), date: '2023-07-15', fileSize: '3.2 MB', format: 'PDF' },
        { title: t('investor.q3Report'), date: '2023-10-15', fileSize: '3.1 MB', format: 'PDF' },
        { title: t('investor.annualReport'), date: '2024-03-20', fileSize: '5.5 MB', format: 'PDF' }
      ]
    },
    {
      year: 2022,
      quarterReports: [
        { title: t('investor.q1Report'), date: '2022-04-15', fileSize: '2.8 MB', format: 'PDF' },
        { title: t('investor.q2Report'), date: '2022-07-15', fileSize: '3.0 MB', format: 'PDF' },
        { title: t('investor.q3Report'), date: '2022-10-15', fileSize: '2.9 MB', format: 'PDF' },
        { title: t('investor.annualReport'), date: '2023-03-20', fileSize: '5.2 MB', format: 'PDF' }
      ]
    }
  ];
  
  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Helmet>
        {/* Basic Meta Tags */}
        <title>{seoConfig.title}</title>
        <meta name="description" content={seoConfig.description} />
        <meta name="keywords" content={seoConfig.keywords} />

        {/* Canonical URL */}
        <link rel="canonical" href={seoConfig.url} />

        {/* Open Graph / Facebook */}
        <meta property="og:title" content={seoConfig.title} />
        <meta property="og:description" content={seoConfig.description} />
        <meta property="og:image" content={seoConfig.image} />
        <meta property="og:url" content={seoConfig.url} />
        <meta property="og:locale" content={seoConfig.locale} />
        <meta property="og:site_name" content={seoConfig.siteName} />
        <meta property="og:type" content="website" />

        {/* Twitter */}
        <meta name="twitter:title" content={seoConfig.title} />
        <meta name="twitter:description" content={seoConfig.description} />
        <meta name="twitter:image" content={seoConfig.image} />
        <meta name="twitter:card" content="summary_large_image" />

        {/* Hreflang tags for multilingual SEO */}
        {hreflangTags.map((tag, index) => (
          <link key={index} rel={tag.rel} hrefLang={tag.hreflang} href={tag.href} />
        ))}

        {/* Structured Data */}
        <script type="application/ld+json">
          {JSON.stringify(structuredData)}
        </script>
      </Helmet>
      
      <Header />
      
      <main className="flex-grow">
         {/* 页面标题区域 */}
        <section className="py-16 md:py-24 bg-gradient-to-r from-gray-50 to-gray-900">
          <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="max-w-3xl mx-auto text-center"
            >
              <h1 className="text-3xl md:text-5xl font-bold text-white mb-6">
                {t('header.regularReports')}
              </h1>
              <div className="w-20 h-1 bg-blue-400 mx-auto mb-8 rounded-full"></div>
              <p className="text-lg md:text-xl text-gray-300 leading-relaxed">
                {t('investor.regularReportsDesc')}
              </p> 
            </motion.div>
          </div>
        </section>
        
        {/* 财务报告列表 */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              {/* 外部报告链接 */}
              <div className="mb-16 p-6 bg-blue-50 rounded-xl border border-blue-100">
                <h3 className="text-xl font-bold text-blue-800 mb-4 flex items-center">
                  <i className="fa-solid fa-external-link-alt mr-3 text-blue-600"></i>
                  {t('investor.officialReports')}
                </h3>
                <p className="text-blue-700 mb-6">
                  {t('investor.officialReportsDesc')}
                </p>
                <a 
                  href="http://www.mamepay.com" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors shadow-md hover:shadow-lg"
                >
                  {t('investor.visitOfficialSite')}
                  <i className="fa-solid fa-arrow-right ml-2"></i>
                </a>
              </div>
              
              {/* 报告年份标签页 */}
              <div className="border-b border-gray-200 mb-10">
                <div className="flex flex-wrap -mb-px">
                  {financialReports.map((yearData, index) => (
                    <button
                      key={yearData.year}
                      className={`mr-6 py-4 px-1 border-b-2 font-medium text-sm focus:outline-none transition-colors ${
                        index === 0 
                          ? 'border-gray-900 text-gray-900' 
                          : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                      }`}
                    >
                      {yearData.year}
                    </button>
                  ))}
                </div>
              </div>
              
              {/* 报告列表 */}
              {financialReports.map((yearData, yearIndex) => (
                <motion.div
                  key={yearData.year}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5 }}
                  className={yearIndex > 0 ? 'hidden' : ''}
                >
                  <div className="space-y-6">
                    {yearData.quarterReports.map((report, reportIndex) => (
                      <div 
                        key={reportIndex}
                        className="bg-gray-50 rounded-xl overflow-hidden transition-all duration-300 hover:shadow-md"
                      >
                        <div className="p-6">
                          <div className="flex flex-col md:flex-row md:items-center justify-between">
                            <div>
                              <h3 className="text-lg font-semibold text-gray-900 mb-2">
                                {report.title} {yearData.year}
                              </h3>
                              <div className="flex items-center text-gray-500 text-sm">
                                <span className="flex items-center mr-6">
                                  <i className="fa-solid fa-calendar-alt mr-2"></i>
                                  {report.date}
                                </span>
                                <span className="flex items-center">
                                  <i className="fa-solid fa-file-pdf mr-2 text-red-500"></i>
                                  {report.format} ({report.fileSize})
                                </span>
                              </div>
                            </div>
                            <div className="mt-4 md:mt-0">
                              <a 
                                href="#" 
                                className="inline-flex items-center px-5 py-2 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-md transition-colors"
                              >
                                <i className="fa-solid fa-download mr-2"></i>
                                {t('investor.download')}
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      </main>
      
      <Footer />
    </div>
  );
}